<template>
  <div class="content">
    <div class="handles">
      <div class="tips" v-if="tipFlag">
        <Icon type="ios-alert" size='24' color='#2d8cf0' />
        您可在本页面查看公客池客户的分配记录，并可根据记录进行重新分配操作<span>
          <Icon type="md-close" size='24' color='#2d8cf0' class="closeClass"
            @click="tipsClose" /></span></div>
      <div class="tipBtn">

        <Tooltip placement="bottom">
          <Icon type="ios-help-circle" size='24' color='#2d8cf0' class="helpIcon" />
          <template #content>
            <p>1.您可根据分配记录，对客户进行重新分配；</p>
            <p>2.如果线索客户的“现归属顾问”发生变更，与分配记录不同时，则不可重新分配（该客户将不可被选中）；</p>
            <p>3.如果线索客户已转到访（即：成为到访客户），则不可重新分配（该客户将不可被选中）</p>
          </template>
        </Tooltip>

        <Button type="primary" style="margin-left:10px;" v-if="unlocking('0101050201')"
          @click="onAllot">重新分配</Button>
        <Button type="primary" style="margin-left:10px;" v-if="unlocking('0101050203')"
          @click="exportData('1')">导出</Button>
        <Button type="primary" style="margin-left:10px;" v-if="unlocking('0101050202')"
          @click="exportData('0')">导出Excel</Button>
      </div>
    </div>
    <dt-grid ref="table" :select="select" :columns="columns" page :onFetch='onFetch'
      :cell-height="80" />
    <allot-modal ref="allotModal" @getDetail='getDetail' />

    <Modal v-model="detailsFlag" title="客户详情" width="80%" :styles="{ top: '5%' }"
      :footer-hide="true" @on-cancel="markCancel">
      <detail-page v-if="detailsFlag" :detailsParams="detailsParams"></detail-page>
    </Modal>

    <!-- <Modal v-model="assignConfirmFlag" :closable='false' width="400px" :footer-hide="true">
      <template #header>
        <p>
          <Icon type="ios-help-circle" color='#f60' size='22' />
          <span>分配线索客户确认</span>
        </p>
      </template>
      <p>您所选择的线索客户已有跟进顾问。<br />
        请确认，分配后是否需从原顾问的“线索客户”中，将该部分线索客户移除？</p>
      <div class="retainClass">
        <RadioGroup v-model="retain" vertical>
          <Radio label="1">
            <Icon type="social-apple"></Icon>
            <span>从原顾问“线索客户”中移除</span>
          </Radio>
          <Radio label="2">
            <Icon type="social-android"></Icon>
            <span>保留在原顾问“线索客户”中</span>
          </Radio>
        </RadioGroup>
      </div>
      <div class="footer">
        <Button @click="assignConfirmCancel">取消</Button>
        <Button type="info" @click="assignConfirmOk">继续分配</Button>
      </div>
    </Modal> -->



  </div>
</template>

<script>
  // import allotModal from './components/allot-modal.vue'
  import allotModal from '../assignCustomersRecord/components/allot-modal.vue'
  import detailPage from '../details.vue'
  import columnOpt from './opt/column.js'
  import clueCustomerMgr from '@/biz/customer/clueCustomer.js'
  import publicCustomerMgr from '@/biz/customer/publicCustomer.js'
  export default {
    components: {
      allotModal,
      detailPage,
    },
    data() {
      return {
        // 3.0
        tabName: 'name1',
        sourcedata: [],
        targetdata: [],
        assignConfirmFlag: false,
        assignConfirmFlagSure: false,
        // retain: '', //是否保留
        tipFlag: false,
        userCustomerId: [],
        customerChoosedLength: 0,
        select: {
          checkbox: {
            checkMethod: ({ row }) => {
              return row.newUserId == row.userId && row.hereto == 1
            }
          },
          change: (e) => { this.tableChange(e) }
        },
        validFlage: false,
        onRecordFlage: false,
        // 3.0

        columns: [],
        list: [],
        params: {},
        allClueNumber: 0,
        noHeretoNumber: 0,
        heretoNumber: 0,
        popLoading: true,
        popClass: '',
        followUpList: [],
        popLen: 0,
        detailsFlag: false,
        detailsParams: {},
      }
    },
    mounted() {
      this.isTips()
      this.columns = columnOpt.options(this)
      this.$refs.table.init(this)
      // this.getColumns()
      clueCustomerMgr.selectTeamUser()
      // clueCustomerMgr.getFilterOptions()
      clueCustomerMgr.getChannel()
      // clueCustomerMgr.getArea()
      this.$refs.table.init(this)
      this.$refs.table.fetch()
    },
    methods: {
      tipsClose() {
        let params = {
          typeCode: 'PUBLIC_POOL_DISTRIBUTION'
        }
        publicCustomerMgr.tipsClose(params).then(res => {
          this.isTips()
        })
      },
      isTips() {
        let params = {
          typeCode: 'PUBLIC_POOL_DISTRIBUTION'
        }
        publicCustomerMgr.tipsGet(params).then(res => {
          if (res.tipsStatus == 1) {
            this.tipFlag = true
          } else {
            this.tipFlag = false
          }
        })

      },
      //表格选中
      tableChange(val) {
        this.userCustomerId = []
        if (val && val.length) {
          this.customerChoosedLength = val.length
          val.forEach((item) => {
            if (item.id) {
              this.userCustomerId.push(Number(item.id))
            }
          })
          this.validFlage = val.some(item => item.isEffective == 1 && item
            .userBuildingType == 1)
        } else {
          this.userCustomerId = []
          this.customerChoosedLength = 0
        }
      },
      // 确认分配
      // assignConfirmOk() {
      //   if (this.retain == '') {
      //     this.$Message.warning('请选择选项')
      //   } else {
      //     this.$refs.allotModal.show(this.userCustomerId, this.retain)
      //   }
      // },
      // assignConfirmCancel() {
      //   this.assignConfirmFlag = false;
      //   this.retain = ''

      // },
      // 导出
      exportData(mask) {
        this.params.maskCustomerPhone = mask
        this.params.buildingId = this.$dt.buildInfo().housesId
        publicCustomerMgr.customerPublicPoolDistributionExport(this.params)
      },
      // exportData() {
      //   publicCustomerMgr.customerPublicPoolDistributionExport(this.params)
      // },
      // 分配线索
      onAllot() {
        if (this.userCustomerId.length <= 0) {
          this.$Message.error('请先选择需要分配的线索')
          return false
        }
        this.$refs.allotModal.show(this.userCustomerId, '', '', 'publicRecord')
        // //如果原顾问为“离案顾问”，或已选择的线索客户为“无效客户”，则分配线索客户时，不弹出“分配线索客户确认”提示浮层（默认选择“从原顾问‘线索客户’中移除”选项）；
        // if (this.validFlage) {
        //   this.assignConfirmFlag = true;
        // } else {

        // }
      },
      // 列表数据
      onFetch(data) {
        this.params = data
        return publicCustomerMgr.customerPublicPoolDistributionList(data).then(res => {
          this.list = res.list
          return res
        })
      },
      // 查看详情
      getDetail(row) {
         this.detailsFlag = true
          this.detailsParams = {
            customerId: row.customerId,
            userCustomerId: row.userCustomerId,
            buildingId: row.buildingId,
            userId: row.userId,
            buildingId: this.$dt.buildInfo().housesId,
            cityCode: this.$dt.buildInfo().cityId,
          }
        // if (row.hereto == '1') {
        //   this.detailsFlag = true
        //   this.detailsParams = {
        //     flag: 'clue',
        //     customerId: row.customerId,
        //     userCustomerId: row.userCustomerId,
        //     userId: row.userId,
        //     buildingId: this.$dt.buildInfo().housesId,
        //     cityCode: this.$dt.buildInfo().cityId,
        //   }
        // } else {
        //   this.detailsFlag = true
        //   this.detailsParams = {
        //     customerId: row.customerId,
        //     userCustomerId: row.userCustomerId,
        //     buildingId: row.buildingId,
        //     userId: row.userId,
        //     buildingId: this.$dt.buildInfo().housesId,
        //     cityCode: this.$dt.buildInfo().cityId,
        //   }
        // }
      },
      markCancel() {
        this.detailsFlag = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .content {
    position: relative;
    padding: 20px;

    .topRecord {
      display: flex;
      flex-direction: row;

      .record1 {
        display: flex;
        flex-direction: row;

        p {
          text-align: center;
          padding: 0 20px;

          span {
            display: block;
            font-size: 20px;
            font-weight: bold;
          }

          em {
            display: block;
            font-style: normal;
          }
        }

        p.heng {
          border-right: 1px #ccc solid;
        }
      }

      .recordBtn {
        padding-left: 20px;


        p {
          span {
            color: #2db7f5
          }
        }

      }
    }

    .retainClass {
      margin-top: 20px;
    }

    .tips {
      background: rgba(254, 252, 236, 1);
      display: inline-block;
      padding: 5px;

      span {
        color: #2d8cf0;
        margin-right: 20px;
      }

    }

    .closeClass {
      vertical-align: -5px;
      cursor: pointer;
    }

    .helpIcon {
      vertical-align: -4px;
    }


  }

  .handles {
    overflow: hidden;

    .tips {
      float: left;
    }

    .tipBtn {
      float: right;
    }

    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    margin-bottom: 10px;
    // flex-direction: row;




  }

  .footer {
    text-align: center;
    margin-top: 20px;
    border-top: 1px #eee solid;
    padding-top: 20px;

    button {
      width: 80px;
      margin: 0 10px;
    }
  }
</style>